<template>
  <div>
    <h1>ref</h1>
    <h2>{{ count }}</h2>
    <button @click="add">增加</button>
  </div>
</template>
<script>
/**
 * ref 任意类型 - 简单数据类型 复杂数据类型都可以
 * 1. 从vue里导入ref函数
 * 2. 使用ref函数 ref(数据) 可以是普通的也可以是复杂 返回的就是响应式数据
 * 3. setup函数返回前面的响应式数据
 * 4. ref创建的数据 
 *      js中必须要加.value 
 *      template省略 底层已经帮我们做了自动解套
 */ 
import {ref} from 'vue'
export default {
  setup() {
    // ref包裹后 会返回一个对象 属性里value 就是我们传入的值
    /**
     * Proxy 第一个参数是对象
     * 底层的Ref对象
     * {
     *  value: 传入的数据
     * }
     * 所以说你传简单数据和复杂数据类型 都可以转成响应式数据
     */
    const count = ref(0)

    console.log(count.value);
    const add = () => {
      count.value++;
      console.log(count.value);
    }
    return {
      count,
      add
    }
  }
}
</script>


